<template>
	<gui-page ref="guiPage" :customHeader="true">
		<template v-slot:gHeader>
			<nav-bar-custom left-icon="left" :title="$t('distributedEnter.historicalRecord')"></nav-bar-custom>
		</template>
		<template v-slot:gBody>
			<view class="distributed">
				<view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x distributed-head">
					<view class="gui-form-item gui-border-b">
						<text class="gui-form-label gui-secondary-text" style="width:200rpx">{{
							$t('distributedEnter.date') }}</text>
						<view class="gui-form-body gui-text-right" @click="dateChoose">
							<view class="gui-form-input gui-text-right" v-if="data.chooseTime.length">
								<text>{{ data.chooseTime[0] }}</text><text v-if="data.chooseTime[1]"> -
									{{ data.chooseTime[1] }}</text>
							</view>
							<input v-else type="button" class="gui-form-input gui-text-right"
								:placeholder="$t('distributedEnter.placeholderTextChoose')" />
						</view>
					</view>
					<view class="gui-form-item gui-border-b">
						<text class="gui-form-label gui-secondary-text" style="width:300rpx">{{
							$t('translationImage.process') }}</text>
						<view class="gui-form-body gui-text-right" style="overflow: visible;">
							<superweiCombox style="text-align: right;" :candidates="data.processList"
								:placeholder="$t('stockManage.placeholder')" v-model="data.processText" :isJSON="true"
								keyName="text" @select="selectProcess"></superweiCombox>
						</view>
						<uni-icons class="iconDelete" type="close" v-if="data.processText" size="18" color="#999"
								@click="handelMaterialClear"></uni-icons>
					</view>
					<view class="gui-form-item gui-border-b">
						<text class="gui-form-label gui-secondary-text" style="width:300rpx">{{
							$t('multilingual.productionLine') }}</text>
						<view class="gui-form-body gui-text-right" style="overflow: visible;">
							<superweiCombox style="text-align: right;" :candidates="data.productLineList"
								:placeholder="$t('stockManage.placeholder')" :isJSON="true" keyName="productionLineName"
								@select="selectProductLine" v-model="data.productLineText" emptyTips="请先选择工序">
							</superweiCombox>
						</view>
					<uni-icons class="iconDelete" type="close" v-if="data.productLineText" size="18" color="#999"
						@click="handelMaterialClear2"></uni-icons>
					</view>
					<view class="gui-form-item gui-border-b">
						<text class="gui-form-label gui-secondary-text" style="width:300rpx">{{
							$t('locationBarcodeInfo.submitter') }}</text>
						<view class="gui-form-body gui-text-right" style="overflow: visible;">
							<superweiCombox style="text-align: right;" :candidates="data.submitterList"
								:placeholder="$t('stockManage.placeholder')" v-model="data.submitter" :isJSON="true"
								keyName="operatorName" @select="selectSubmitter"></superweiCombox>
						</view>
						<uni-icons class="iconDelete" type="close" v-if="data.submitter" size="18" color="#999"
							@click="handelMaterialClear3"></uni-icons>
					</view>
					<view class="gui-form-item gui-border-b gui-flex gui-justify-content-center">
						<view class="gui-flex gui-space-between gui-align-items-center"
							style="width: 70%;height: 100rpx;">
							<button type="default" class="gui-button gui-button-mini gui-bg-black4 gui-noborder"
								style="width:200rpx;" @click="reset">
								<text class="gui-block gui-color-black gui-button-text-mini gui-icons">{{
									$t('distributedEnter.reset') }}</text>
							</button>
							<button type="default" class="gui-button gui-button-mini gui-bg-blue gui-noborder"
								style="width:200rpx;" @click="search(OPERATION_SEARCH)">
								<text class="gui-block gui-color-white gui-button-text-mini gui-icons">{{
									$t('distributedEnter.search') }}</text>
							</button>
						</view>
					</view>
				</view>
				<!-- 汇总信息 -->
				<view class="card-boxCustom gui-transition-all  defective-box" style="margin-top: 20rpx;" v-if="data.list.length">
					<uni-collapse v-model="data.collectShow" >
						<uni-collapse-item titleBorder="none" :show-animation="true">
							<template v-slot:title>
								<view class="custom-card-title">
									<text class="title-line"></text>
									{{ $t('taskList.materialSum') }}
								</view>
							</template>
							<uni-card class="card-my" >
								<uni-table border stripe emptyText="暂无更多数据" style="max-height: 400rpx;box-sizing: border-box;">
									<!-- 表头行 -->
									<uni-tr class="tableLineHeight">
										<uni-th class="tableLine" width="100">{{ $t("distributedEnter.materialCode")
											}}</uni-th>
										<uni-th class="tableLine" width="100">{{ $t("translationImage.process")
											}}</uni-th>
											<uni-th class="tableLine" width="100">{{ $t("distributedEnter.qty")
											}}</uni-th>
									</uni-tr>
									<!-- 表格数据行 -->
									<uni-tr class="tableLineHeight" v-for="(x, i) in data.totalSum" :key="i">
										<uni-td class="tableLine">{{ x.materialCode }}</uni-td>
										<uni-td class="tableLine">{{ x.processCode }}</uni-td>
										<uni-td class="tableLine">{{ x.errorQty }}</uni-td>
									</uni-tr>
								</uni-table>
							</uni-card>
						</uni-collapse-item>
					</uni-collapse>
					<view class="custom-card-title" style="width:100%;display: flex;font-size:28rpx;padding:0 20rpx">
						<text class="body-item-title" style="width:65%;">{{ $t('taskList.sumQty')}}</text>
						<text>{{data.sums.errorQty}}</text>
					</view>
				</view>
				<!-- 底部显示区域 -->
				<scroll-view :show-scrollbar="false" :scroll-y="true" class="scroll" @scrolltolower="scrolltolowerFn">
					<!-- 歷史數據 -->
					<template v-for="(x, i) in data.list" :key="i">
						<view style="height: 15rpx"></view>
						<view class="card-boxCustom gui-transition-all  defective-box">
							<view></view>
							<view class="card-body" style="padding-bottom: 20rpx;">
								<view class="card-rotating" @click.stop="data.listShow[i] = !data.listShow[i]">
									<uni-icons type="bottom" color="#9C9C9C" size="20"></uni-icons>
								</view>
								<view class="card-body-item">
									<text class="body-item-title">{{ $t('distributedEnter.date')
										}}：</text>{{ x.errorReportDate }}
								</view>
								<!-- <view class="card-body-item">
									<text class="body-item-title">{{ $t('distributedEnter.materialCode') }}：</text>{{
										x.materialCode }}
								</view> -->
								<view class="card-body-item">
									<text class="body-item-title">{{ $t('locationBarcodeInfo.defectiveNo')
										}}：</text>{{ x.errorQty }}
								</view>
								<view class="card-body-item">
									<text class="body-item-title">{{ $t('translationImage.process')
										}}：</text>{{ x.processName }}
								</view>
								<view class="card-body-item">
									<text class="body-item-title">{{ $t('locationBarcodeInfo.processCode')
										}}：</text>{{ x.processCode }}
								</view>
								<view class="card-body-item">
									<text class="body-item-title">{{ $t('multilingual.productionLine')
										}}：</text>{{ x.productionLineName }}
								</view>
								<view class="card-body-item">
									<text class="body-item-title">{{ $t('locationBarcodeInfo.submitter')
										}}：</text>{{ x.createUserName }}
								</view>
							</view>
							<view class="card-body-folding" v-show="data.listShow[i]">
								<view class="gui-border-t" style="padding: 20rpx;">
									<view class="defective-items borderbox" v-for="(k, index) in x.details"
										:key="index">
										<view class="card-body-item card-item-50 flexbox" style="width: 100%;">
											<text class="body-item-title widthbox">{{ $t('multilingual.defectiveItems')
												}}：</text>
											<text class="body-item-title widthflex">{{ k.errorCauseName }}</text>
										</view>
										<view class="card-body-item card-item-50 flexbox" style="width: 100%;">
											<text class="body-item-title widthbox">{{ $t('distributedEnter.materialCode')
												}}：</text>
											<text class="body-item-title widthflex">{{ k.materialCode }}</text>
										</view>
										<view class="card-body-item card-item-50" style="width: 100%;">
											<text class="body-item-title widthbox">{{ $t('pageTranslation.defectiveQty')
												}}：</text>
											<text class="body-item-title">{{ k.errorQty }}</text>
										</view>
										<view class="card-body-item card-item-50" style="width: 100%;">
											<text class="body-item-title widthbox">{{
												$t('locationBarcodeInfo.submitter') }}：</text>
											<text class="body-item-title">{{ k.createUserName }}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</template>
					<view v-if="data.noticeHooks" class="noticeHooks">
						{{ data.list.length == 0 ? $t('stockManage.notAvailable') : $t('stockManage.without') }}
					</view>
				</scroll-view>
			</view>
			<calendarCustom ref="calendarCustomRef" @setTime="getTime" :selectTime="data.chooseTime"></calendarCustom>
		</template>
	</gui-page>
</template>
<script setup>
import searchCustom from '@/components/searchCustom';
import superweiCombox from '@/components/superweiCombox';
import calendarCustom from '@/components/calendarCustom';
import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
import graceJS from "@/Grace6/js/grace.js";
import { navigate } from '@/utils/routerSkip.js';
import { findLineByProcessCode, findErrorRecord, getOperator } from '@/api/api.js'
import { basPdaOperationLogFn } from '@/utils/index.js';
import { OPERATION_SEARCH, OPERATION_REASCT, OPERATION_LOOK } from '@/constant/index.js'
import { useStore } from "vuex";
import { getDataDictionaryFn, pitchOnFn } from '@/utils/index.js'
components: {
	superweiCombox,
		searchCustom,
		calendarCustom
}
let store = useStore();
let calendarCustomRef = ref(null);
let data = reactive({
	noticeHooks: false, //暂无相关数据标识
	chooseTime: [],
	list: [],
	listShow: [],
	page: 1,
	rows: 10,
	isFinish: false,
	isLoading: false,
	processList: [], //工序数据
	processId: '', //用户选中工序
	processText: '', //用户选中工序
	productLineList: [],
	submitterList: [], //提交人
	submitter: '',
	submitterText: '',
	productLineId: '',
	productLineText: '',
	productLineInfo: '',
	submitterInfo: '',
	totalSum: [],// 汇总数据
	collectShow: ['0'],
	sums:null ,//汇总数据
});
const {
	ctx
} = getCurrentInstance();
onMounted(() => {
	search(OPERATION_LOOK)
	getInitData()
	submitter()
})
// 用户选择产线
const selectProductLine = (etv) => {
	// console.log(etv, '--------selectProductLine---------');
	data.productLineId = etv.productionLineCode;
	data.productLineText = etv.productionLineName;
	data.productLineInfo = etv;
	data.page = 1;
}
// 提交人 
const selectSubmitter = (etv) => {
	data.submitter = etv.operatorName;
	data.submitterText = etv.operatorNo;
	data.submitterInfo = etv;
	data.page = 1;
}
// 根据用户选中的工序查询产线
const findLineByProcessCodeFn = () => {
	findLineByProcessCode({
		processCode: data.processId
	}).then(res => {
		if (res.status == 200) {
			data.productLineList = res.data
		} else {
			uni.showToast({ title: res.message, icon: 'none' })
		}
	})

}

const handelMaterialClear=()=>{
	data.processText=''	
}
const handelMaterialClear2=()=>{
	data.productLineText=''	
}
const handelMaterialClear3=()=>{
	data.submitter=''	
}

const submitter = () => {
	getOperator().then(res => {

		data.submitterList = res
	})
}
// 用户选中工序 
const selectProcess = (etv) => {
	// console.log(etv, '-------selectProcess----------');
	data.processId = etv.value;
	data.processText = etv.text;
	data.productLineList = [];
	data.productLineId = '';
	data.productLineText = '';
	// console.log(data)
	data.page = 1;
	findLineByProcessCodeFn();
}
// 获取工序数据
const getInitData = async () => {
	// 获取调入组织信息
	data.processList = await getDataDictionaryFn('ProductionProcesses')
	let tepSelect1 = pitchOnFn(data.processList)
	if (tepSelect1.length) {
		data.processId = tepSelect1[0].value
		data.processText = tepSelect1[0].text
	}
}
const goPage = (x) => {
	navigate({
		url: `/pages/distributed/distributedOut?id=${x.id}`
	})
}

const search = async (operationType) => {
	if (!data.chooseTime.length) {
		let time = await store.dispatch('getSystemTimeRequest') || ''
		data.chooseTime = [time]
	}
	let parmes = {
		errorReportDateStart: data.chooseTime[0] || '',
		errorReportDateEnd: data.chooseTime[1] ? data.chooseTime[1] : (data.chooseTime[0] || ''),
		processCode: data.processId,
		productionLineCode: data.productLineId,
		page: data.page,
		rows: data.rows,
		submitUser: data.submitter
		// 添加提交人查询
	}
	findErrorRecord(parmes).then(res => {
		try {
			let inputParameter = JSON.stringify(parmes)
			let returnParameter = JSON.stringify(res)
			let operationPicture = '生产检验-历史记录'
			let callInterface = res.rquestUrl
			let opertionParmes = {
				inputParameter,
				returnParameter,
				operationPicture,
				callInterface,
				responseCode: res.status,//返回状态
				errorMessage: res.message,//错误信息
				isPass: res.status == 200 ? 'Y' : 'N',//是否成功 Y N
				operationType: operationType
			}
			basPdaOperationLogFn(opertionParmes)
		} catch (error) {
		}
		data.isLoading = false;
		if (res.status == 200) {
			data.totalSum = res.data.totalSum
			data.sums = res.data.sums
			let { rows } = res.data.data;
			rows.forEach(x => {
				// console.log(x)
				let a = ''
				let b = 0
				x.details.forEach(item => {
					if (!a.includes(item.createUserName)) {
						a = a + item.createUserName + ','
					}
					b = b + item.errorQty
				})
				x.createUserName = a.replace(/,$/, "");
				x.errorQty = b
			})
			data.noticeHooks = false
			if (data.page == 1) {
				data.list = rows
				data.listShow = []
				if (rows.length == 0) {
					data.noticeHooks = true
				}
				if (data.list.length >= res.data.data.total) {
					data.noticeHooks = true
				}
			} else {
				data.list.push(...rows)
				if (data.list.length >= res.data.data.total) {
					data.noticeHooks = true
				} else {
					data.noticeHooks = false
				}
			}
			rows.forEach(x => {
				data.listShow.push(false)
			})
			data.isFinish = data.list.length >= res.data.data.total;
		} else {
			uni.showToast({ title: res.message, icon: "none" });
		}
	})
}
// 下拉加载
const scrolltolowerFn = () => {
	// console.log(data.isFinish, 'data.isFinishdata.isFinish')
	if (!data.isFinish && !data.isLoading) {
		data.page++
		data.isLoading = true;
		search(OPERATION_REASCT)
	}
}
const reset = () => {
	data.chooseTime = []
	data.page = 1;
	data.processId = ''
	data.processText = ''
	data.productLineId = ''
	data.productLineText = ''
	data.submitter = ''
	search(OPERATION_REASCT)
}
const dateChoose = () => {
	calendarCustomRef.value.open();
}
const getTime = (times) => {
	data.chooseTime = times;
}
</script>
<style lang="scss" scoped>
.widthbox {
	width: 22%;
}

.borderbox {
	border-bottom: 0.03125rem solid #F2F2F2 !important;
	padding-bottom: 20rpx;
	margin-bottom: 20rpx;
}

.widthflex {
	flex: 1;
}

.flexbox {
	display: flex;
	align-items: flex-start !important;
}

.body-item-title {
	// width: 140rpx!important;
}

.distributed-head {
	border-bottom-left-radius: 16rpx;
	border-bottom-right-radius: 16rpx;
}

.scroll {
	flex: 1;
	height: 2rpx;
}

.distributed {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 88rpx);
	// height: 100vh;
}

.card-box {
	margin: 0 15rpx;
	box-shadow: 0rpx 0rpx 4rpx 0 #A5A5A5;
	background: #fff;
	padding: 30rpx;
	border-radius: 16rpx;
}

.card-item {
	line-height: 60rpx;
}

.card-bottom {
	margin-bottom: 30rpx;
}

.filtrate-item {
	display: flex;
	align-items: center;
	font-size: 32rpx;
	margin-bottom: 20rpx;

	.filtrate-itemLeft {
		height: 32rpx;
		line-height: 32rpx;
		width: 100rpx;
	}

	.filtrate-itemRight {
		border: 2rpx solid #A5A5A5;
		border-radius: 8rpx;
		overflow: hidden;
		line-height: 40rpx;
		width: 300rpx;
	}

	.defective-items {
		display: flex;
		font-size: 32rpx;
		line-height: 48rpx;
		color: #555;
	}
}

.defective-box {
	margin-bottom: 0;
	padding-bottom: 0;
}

.tableLineHeight {
	height: 60rpx;
	min-width: 630rpx !important;
}

.tableLine {
	padding: 0 20rpx !important;
	box-sizing: border-box;
}

.uni-table-loading {
	height: 60rpx !important;
}
</style>
